<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?>
<!--返回错误信息-->
<?php echo validation_errors(); ?>
<!DOCTYPE html>
<html lang="en">

<head>
    <?php
    $title = [
        'title' => '商品分类',
    ];
    $this->load->view('/admin/common/header', $title);
    ?>
</head>

<body data-type="widgets">
<script src="/assets/js/theme.js"></script>
<div class="am-g tpl-g">

    <!--    头部   侧边菜单-->
    <?php $this->load->view('/admin/common/bodyLeft'); ?>
    <script type="text/javascript">
    	$(".js-sidebar-nav>li:nth-child(8)>ul").show(80);
    	$(".js-sidebar-nav>li:nth-child(8)>a>span").addClass("sidebar-nav-sub-ico-rotate");
    	$(".js-sidebar-nav>li:nth-child(8)>ul>li:nth-child(2)>a").addClass("active");
    </script>
    <!-- 内容区域 -->
    <div class="tpl-content-wrapper">
        <div class="row-content am-cf">
            <div class="row">
                <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
                    <div class="widget am-cf">
                        <div class="widget-head am-cf">
                            <div class="widget-title  am-cf">
                                <ol class="am-breadcrumb am-breadcrumb-slash">
                                    <li><a href="/admin/goods/index?page=1">商品管理</a></li>
                                    <li class="am-active">商品分类</li>
                                </ol>
                            </div>
                        </div>
                        <div class="widget-body  am-fr">
                            <div class="admin-biaogelist am-u-sm-12 am-g-fixed">
                                <div class="am-u-sm-12">
                                    <div class="am-btn-toolbar am-u-sm-12">
                                        <div class=" am-btn-group-xs  am-fl">
                                            <button type="button" class="am-btn am-btn-primary" data-am-modal="{target: '#doc-modal-1', closeViaDimmer: 0, width: 400, height: 205}" id="addClassify"><i class="am-icon-plus"></i> 新增</button>
                                            <button type="button" class="am-btn am-btn-success" data-am-modal="{target: '#doc-modal-2', closeViaDimmer: 0, width: 400, height: 205}" id="editClassify"><i class="am-icon-pencil"></i> 修改</button>
                                            <button type="button" class="am-btn am-btn-danger" id="removeClassify"><i class="am-icon-trash"></i> 删除</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="commodity-list">
                                    <ul class="am-u-sm-12 ">
                                        <li style="width: 30%;border-right: 0">一级分类</li>
                                        <li style="width: 35%;border-right: 0">二级分类</li>
                                        <li style="width: 35%">三级分类</li>
                                    </ul>
                                </div>
                                <div class=" am-u-sm-12 commodity-list-content">
                                    
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
</div>
<!-- 新增模态框 -->
<div class="am-modal am-modal-no-btn" tabindex="-1" id="doc-modal-1">
    <div class="am-modal-dialog">
        <div class="am-modal-hd">新增子分类
            <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
        </div>
        <div class="am-modal-bd" style="margin-top: 26px;">
            <form class="am-form">
                <div class="am-u-sm-8 am-u-sm-centered">
                    <input type="text" name="classify" id="classifyInput" class="form-control">
                </div>
            </form>
        </div>
        <div>
            <button class="am-btn am-btn-primary" id="save" data-am-modal-close>保存</button>
        </div>
    </div>
</div>

<!-- 编辑模态框 -->
<div class="am-modal am-modal-no-btn" tabindex="-1" id="doc-modal-2">
    <div class="am-modal-dialog">
        <div class="am-modal-hd">修改分类名
            <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
        </div>
        <div class="am-modal-bd" style="margin-top: 26px;">
            <input type="text" name="classify" class="form-control" id="classifyEdit">
        </div>
        <div>
            <button class="am-btn am-btn-primary" id="edit" data-am-modal-close>修改</button>
        </div>
    </div>
</div>

<!-- 模拟confirm -->
<div class="am-modal am-modal-confirm" tabindex="-1" id="my-confirm">
  <div class="am-modal-dialog">
    <div class="am-modal-bd">
      确定要删除该分类吗？
    </div>
    <div class="am-modal-footer">
      <span class="am-modal-btn" data-am-modal-cancel>取消</span>
      <span class="am-modal-btn" data-am-modal-confirm>确定</span>
    </div>
  </div>
</div>

<!-- alert -->
<div class="am-modal am-modal-alert" tabindex="-1" id="my-alert">
  <div class="am-modal-dialog">
    <div class="am-modal-hd">提示</div>
    <div class="am-modal-bd">

    </div>
    <div class="am-modal-footer">
      <span class="am-modal-btn">确定</span>
    </div>
  </div>
</div>

<script type="text/javascript">

    $(function(){

        initCategory();

    })

    function initCategory(){
        var divCategory = $(".commodity-list-content");
        divCategory.empty();
        $.ajax({
            url:"/api/goods/categoryData",
            data:"",
            dataType:"json",
            type:"post",
            async:false,
            success:function(data){
                console.log(data);
                for(var i =0; i<data.length; i++){
                    var text="";
                    var ul="";
                    ul ='<ul class="list-content">'+
                    '<li class="design">'+
                    '<input class="design-tips" name="second" data-category="'+ data[i].category +'" data-level="0" type="radio"/>'+data[i].name+'</li>'+
                    '<li class="classify-first">';

                    if(data[i].two.length == 0){
                        text += '<ul class="first-list">'+
                                    '<li class="first-list-content"></li>'+
                                    '<li class="classify-second">'+
                                        '<ul class="second-list">'+
                                            '<li class="second-list-content"></li>'+
                                        '</ul>'+
                                    '</li>'+
                                '</ul>';
                    }else{
                        for(var j = 0;j < data[i].two.length; j++){
                            text += '<ul class="first-list">'+
                                        '<li class="first-list-content"><input class="first-tips" name="second" type="radio" data-category="'+ data[i].two[j].one_category +'" data-id="'+ data[i].two[j].id +'" data-level="1"/>'+data[i].two[j].name+'</li>'+
                                        '<li class="classify-second">'+
                                        '<ul class="second-list">';

                            if(data[i].two[j].three.length == 0){
                                text += '<li class="second-list-content"></li>';
                            }else{
                                for(var k = 0;k < data[i].two[j].three.length; k++){
                                    text += '<li class="second-list-content">'+
                                                '<input class="second" type="radio" name="second" data-category="1" data-id="'+ data[i].two[j].three[k].id +'" data-parentid="'+ data[i].two[j].id +'" data-level="2" />'+ data[i].two[j].three[k].name +
                                            '</li>';
                                }
                            }
                            


                            text +='</ul></li></ul>'
                        }
                    }
                    text +='</li></ul>'
                    ul += text;
                    divCategory.append(ul);
                }
                firstHeight();
            }
        })
    }

    //高度
    function firstHeight(){
        for(var i = 0; i < $(".list-content").length; i ++){
            var firstNum = $(".list-content:eq("+i+") .first-list").length;
            var firstLast = firstNum - 1;
            $(".list-content:eq("+i+") .design").css("border-top","0");
            $(".list-content:eq("+i+") .design").css("border-right","0");
            var firstHeight = 0;
            for(var j = 0; j < firstNum; j ++){
                var secondNum = $(".list-content:eq("+i+") .first-list:eq("+j+") .second-list-content").length;
                var secondHeight = secondNum * 45 +"px";
                $(".list-content:eq("+i+") .first-list-content").eq(j).css("height",secondHeight);
                $(".list-content:eq("+i+") .first-list-content").eq(j).css("line-height",secondHeight);
                $(".list-content:eq("+i+") .first-list-content").eq(j).css("border-top","0");
                $(".list-content:eq("+i+") .first-list-content").eq(j).css("border-right","0");
                $(".list-content:eq("+i+") .first-list").eq(j).css("height",secondHeight);
                
                for( var k =0; k < secondNum; k++){
                    $(".list-content:eq("+i+") .first-list:eq("+j+") .second-list-content").eq(k).css("border-top","0");
                }

                if(secondNum == 0){
                    $(".list-content:eq("+i+") .first-list").eq(j).remove();
                }
                firstHeight += $(".list-content:eq("+i+") .first-list").eq(j).height();
            }
            var listHeight = firstHeight + "px";

            $(".list-content").eq(i).css("height",listHeight);
            $(".design").eq(i).css("height",listHeight);
            $(".design").eq(i).css("line-height",listHeight);
        }
    }
    //添加分类
    $("#addClassify").click(function(){
        var whichCheck = $("input[name='second']:checked");
        var oneCategory = whichCheck.data("category");
        var twoCategory = whichCheck.data("id");
        if(whichCheck.length ==0){
            $("#my-alert .am-modal-bd").text("请先选择分类!");
            $('#my-alert').modal();
            return false;
        }
        if(whichCheck.data("level")>=2){
            $("#my-alert .am-modal-bd").text("请选择一级分类或者二级分类!");
            $('#my-alert').modal();
            return false;
        }
        if(typeof(twoCategory) == "undefined"){
            $("#save").unbind("click").click(function(){
                
                var name = $("#classifyInput").val();
                if(name.replace(/(^\s*)|(\s*$)/g, "")==""){
                    $("#my-alert .am-modal-bd").text("请输入分类名称!");
                    $('#my-alert').modal();
                    return false;
                }
                $.ajax({
                    type:"POST",
                    url:"/admin/goods/addCategory",
                    data:{
                        name:name,
                        oneCategory:oneCategory
                    },
                    // dataType: "json",
                    async:false,
                    success:function(data){
                        initCategory();
                    }
                });
                $("#classifyInput").val("");
            });
        }else{
            $("#save").unbind("click").click(function(){
                var name = $("#classifyInput").val();
                if(name.replace(/(^\s*)|(\s*$)/g, "")==""){
                    $("#my-alert .am-modal-bd").text("请输入分类名称!");
                    $('#my-alert').modal();
                    return false;
                }

                console.log("name:"+name);
                console.log("oneCategory:"+oneCategory);
                console.log("twoCategory:"+twoCategory);


                $.ajax({
                    type:"POST",
                    url:"/admin/goods/addCategory",
                    data:{
                        name:name,
                        oneCategory:oneCategory,
                        twoCategory:twoCategory
                    },
                    // dataType: "json",
                    async:false,
                    success:function(data){
                        initCategory();

                    }
                });
                $("#classifyInput").val("");
            });
        }
    });
    //编辑分类
    $("#editClassify").click(function(){
        var whichCheck = $("input[name='second']:checked");
        var id = whichCheck.data("id");
        // alert(id);
        if(whichCheck.length == 0){
            $("#my-alert .am-modal-bd").text("请选择分类!");
            $('#my-alert').modal();
            return false;
        }
        if(typeof(id) == "undefined"){
            $("#my-alert .am-modal-bd").text("一级分类不允许修改，请选择二级分类或者三级分类!");
            $('#my-alert').modal();
            return false;
        }
        $("#edit").unbind("click").click(function(){

            var name = $("#classifyEdit").val();
            if(name.replace(/(^\s*)|(\s*$)/g, "")==""){
                $("#my-alert .am-modal-bd").text("请输入分类名称!");
                $('#my-alert').modal();
                return false;
            }

            $.ajax({
                type:"POST",
                url:"/admin/goods/editCategory",
                data:{
                    name:name,
                    id:id
                },
                // dataType: "json",
                async:false,
                success:function(data){
                    initCategory();
                }

            });
            $("#classifyEdit").val("");
        });
    });


    //删除分类
    $("#removeClassify").click(function(){
        var whichCheck = $("input[name='second']:checked");
        var id = whichCheck.data("id");
        if(whichCheck.length == 0){
            $("#my-alert").find(".am-modal-bd").text("请选择分类!");
            $("#my-alert").modal();
            return false;
        }
        if(typeof(id) == "undefined"){
            $("#my-alert").find(".am-modal-bd").text("一级分类不允许删除!");
            $("#my-alert").modal();
            return false;
        }
        var childrenElements=$("input[type=radio][data-parentid="+id+"]");
        if(childrenElements.length){
            $("#my-alert").find(".am-modal-bd").text("分类下有子分类，不能删除，请先删除子分类!");
            $("#my-alert").modal();
            return false;
        }

        $('#my-confirm').modal({
            onConfirm: function(options) {
                $.ajax({
                    type:"POST",
                    url:"/admin/goods/removeCategory",
                    data:{
                        id:id
                    },
                    // dataType: "json",
                    async:false,
                    success:function(data){
                        initCategory();
                    }
                });
            },
            onCancel: function() {
            }
        });

    })
    
</script>
<script src="/assets/js/amazeui.min.js"></script>
<script src="/assets/js/amazeui.datatables.min.js"></script>
<script src="/assets/js/dataTables.responsive.min.js"></script>
<script src="/assets/js/app.js"></script>
    
</body>

</html>